 new Vue({
    name:"Head",
    el: '#Head',
    data() {
        return {
            head_ul_li_hover: 0,
            state: document.body.clientWidth,
            hiddenBox: false,
            headlineS: ["首页", "长远创造", "长远少年", "长远导师", "关于我们"],
            btnWrapClass: ["btn-wrap_p_show0", "btn-wrap_p_show1", "btn-wrap_p_show2"],
            nav_boxClass: ["nav-box1", "nav-box2", "nav-box3", "nav-box4", "nav-box5"]
        }
    }, template: `<div>
        <div class="head">
            <img src="../../img/log.png">
            <!--大标题-->
            <ul>
              <a href="./index.html">
                <li @click="head_ul_li_hover=0"
                    :class="head_ul_li_hover==0?'head_ul_li_hover':''" >{{ headlineS[0] }}
                </li>
                  </a>
                  <a href="./LongTermCreation.html">
                 <li @click="head_ul_li_hover=1"
                    :class="head_ul_li_hover==1?'head_ul_li_hover':''" >        
                    {{ headlineS[1] }}
                </li>
                </a>
                 <li @click="head_ul_li_hover=2"
                    :class="head_ul_li_hover==2?'head_ul_li_hover':''" >{{ headlineS[2] }}
                </li>
                 <li @click="head_ul_li_hover=3"
                    :class="head_ul_li_hover==3?'head_ul_li_hover':''" >{{ headlineS[3] }}
                </li>
                 <li @click="head_ul_li_hover=4"
                    :class="head_ul_li_hover==4?'head_ul_li_hover':''" >{{ headlineS[4] }}
                </li>
            
<!--            -->
<!--                <li v-for="(item,index) in headlineS" @click="head_ul_li_hover=index"-->
<!--                    :class="head_ul_li_hover==index?'head_ul_li_hover':''" :key="index">{{ item }}-->
<!--                </li>-->

                <li class="nav-box" :class="nav_boxClass[head_ul_li_hover]"></li>
            </ul>
            <!-- 显示隐藏 小标题按钮     -->
            <div @click="hiddenBox =!hiddenBox" ref="btn-wrap" class="btn-wrap">
                <p v-for="item in 3" :class="hiddenBox?btnWrapClass[item-1]:''" :key="item-1"></p>
            </div>
        </div>
        <!--小标题-->
        <transition-group
                name=" animate__animated  "
                enter-active-class="animate__fadeIn"
                leave-active-class="animate__fadeOut">

            <div class="hiddenBox" v-show="hiddenBox" key="1">
                <ul>
                    <li v-for="(item,index) in headlineS" @click="head_ul_li_hover=index"
                        :class="head_ul_li_hover==index?'hiddenBoxLiHous':''" :key="index">{{ item }}
                    </li>
                </ul>
            </div>
        </transition-group>
    </div>`,
})